<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>开关灯</title>
  <style>
    body {
      /* 过渡动画效果： all所有样式 动画持续时间; */
      transition: all 0.5s;
    }
  </style>
</head>

<body>
  <button>开关灯按钮</button>

  <script>
    // 需求分析：
    // 1. 查找按钮标签
    // 2. 给按钮添加点击事件
    // 3. 先实现关灯效果(本质：修改 body 标签的背景样式)

    // 1. 找到按钮标签，找到的结果可以用变量接收起来
    //    document      文档(当前的html文件)
    //    query         查找
    //    Selector      选择器
    let btn = document.querySelector('button')

    // 2. 添加点击事件
    //    addEventListener     添加事件监听， 如监听点击事件
    //      add        添加
    //      Event      事件
    //      Listener   监听器
    //    click        单击
    //    function     函数，用来封装代码，当事件触发，函数内封装的代码被执行
    // 🔔准备一个变量用于存储开关的状态
    let isOpen = '开'
    btn.addEventListener('click', function () {
      // 查找 body 标签
      let body = document.querySelector('body')
      // 🚨 一个等于号，在 JS 中是赋值保存
      // 🚨 三个等于号：在 JS 中是判断是否等于
      // PS：不建议使用两个等于号，不够严格可能会存在安全问题
      if (isOpen === '开') {
        // 修改 body标签 的 样式 的 背景色 = 黑色    （PS：点符号在JS可以解读为 的 ）
        body.style.backgroundColor = '#000'  // 关灯，改为黑色
        isOpen = '关'   // 变量改为 关
      } else {
        body.style.backgroundColor = '#fff'  // 开灯，改为白色
        isOpen = '开'  //  变量改为 开
      }
    })
  </script>
</body>

</html>